<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="./css/mui.min.css">

		<style type="text/css">
			body {
				background: #F6F6F6;
			}
			p{
				margin-bottom: 1px;
			}
			.header {
				background: #FD3F3F;
				height: 180px;
				width: 100%;
			}

			.mui-title {
				color: #fff;
				padding: 0;
				line-height: 26px;
			}

			.seach {
				display: flex;
				align-items: center;
				position: fixed;
				top: 0;
				width: 100%;
				background: #FD3F3F;
				    z-index: 10000;
			}

			.input {
				width: 75%;
				margin: 10px;
			}

			#input {
				background: #fff;
				color: #999;
				padding-left: 10px;
				border: 0;
				outline: 0;
				height: 37px;
				width: 100%;
				border-radius: 10px;
			}

			input:active {
				outline: 0;
			}

			.seach>img {
				width: 35px;
				height: 35px;
			}

			::-webkit-input-placeholder {
				color: #999;
				font-size: 13px;
				padding-left: 10px;
			}

			.banner,
			.nav {
				width: 100%;
			}

			#banner_img {
				width: 94%;
				margin: auto;
				height: 144px;
				display: block;
				margin-top: -104px;
				border-radius: 10px;
			}

			.nav_bar {
				width: 94%;
				margin: auto;
				background: #fff;
				height: 100px;
				margin-top: 15px;
				display: flex;
				justify-content: space-around;
			}

			.nav_bar_item {
				width: 22%;
				text-align: center;
			}

			.nav_bar_item<p {
				font-size: 13px;
			}

			.miaosha {
				height: 240px;
				background: #fff;
				width: 94%;
				margin: auto;
				margin-top: 15px;
			}

			.ms {
				padding: 10px;
				align-items: center;
				display: flex;
			}

			.ms>span {
				font-weight: 600;
			}

			.dian {
				width: 60px;
				border-radius: 10px;
				height: 22px;
				border: 1px solid red;
				text-align: center;
				line-height: 22px;
				color: red;
				font-size: 14px;
				margin-left: 16px;
			}

			.mui-segmented-control.mui-scroll-wrapper {
				height: 250px;
			}

			.mui-segmented-control.mui-scroll-wrapper .mui-control-item {
				padding: 0 10px;
				line-height: 17px;
				white-space: initial;
				
			}

			.mui-control-item>img {
				width: 123px;
			}
			
			.desc{
				width: 123px;
				height:34px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp:2;
				overflow: hidden;
				color: #333;
			}
			.desc1{
				width: 100%;
				height:38px;
				line-height: 18px;
				text-align: left;
				padding: 0px 10px 0 10px;
			}
			.mui-segmented-control.mui-scroll-wrapper .mui-scroll{
			white-space: inherit;	
			}
			.price{
				color: #FD3F3F;
				font-weight: 500;
				font-size: 15px;
			}
			.list{
				width: 96%;
				margin: auto;
				margin-top: 10px;
			}
			.list_product{
				display: flex;
				
				flex-wrap: wrap;
				
			}
			.list_product_c{
				text-align: center;
				width: 47.2%;
				background: #fff;
				margin: 4px;
				height: 286px;
				
				border-radius: 10px;
			}
			.list_product_c>img{
				width: 100%;
				height: 213px;
				border-radius: 10px 10px 0 0;
			}
			.price_{
				text-align: left;
			
			}
			.olf_price{
				text-decoration: line-through;
				color: #777;
				font-size: 14px;	
			}
			.olf_price::before{
				content:'￥';
				font-size: 12px;
	
			}
		
			.pt-10{
				padding-top: 8px;
			}
			.product_price::before{
				content:'￥';
				font-size: 12px;
				padding-left: 10px;
			}
		</style>
	</head>
	<body>

		<div id="container_phone">
			<div class="header">
				<div class="seach" class="mui-bar mui-bar-nav">
					<img src="fonts/xinxi.png">
					<div class="input">
						<input type="" name="" id="input" placeholder="请输入商品 品牌" value="" />
					</div>
					<img src="fonts/shaixuan.png">
				</div>
			</div>
			<div class="banner">
				<img src="fonts/haibao.jpg" id="banner_img">

			</div>
			<div class="nav">
				<div class="nav_bar">
					<div class="nav_bar_item">
						<img src="./fonts/1.png">
						<p>百货</p>
					</div>
					<div class="nav_bar_item">
						<img src="./fonts/3.png">
						<p>二手专卖</p>
					</div>
					<div class="nav_bar_item">
						<img src="./fonts/4.png">
						<p>信息</p>
					</div>
					<div class="nav_bar_item">
						<img src="./fonts/5.png">
						<p>招聘</p>
					</div>
				</div>
			</div>
			<div class="miaosha">
				<div class="ms">
					<span>进入秒杀</span>
					<div class="dian">
						<span>十点场</span>
					</div>
				</div>
				<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll" style="white-space: nowrap;">
						<div class="mui-control-item">
							<img src="fonts/chengzi.png">
							<p class="desc">
								<span>来自大自然的馈赠，5折处理了</span>
							</p>
							<p class="price pt-10">19.9/箱</p>
						</div>
						<div class="mui-control-item">
							<img src="fonts/xiezi.jpeg">
							<p class="desc">
								<span>纯牛皮皮鞋，高贵从现在开始</span>
							</p>
							<p class="price pt-10">￥199</p>
						</div>
						<div class="mui-control-item">
							<img src="fonts/xifashui.jpg">
							<p class="desc">
								<span>沙宣洗发水，头发修复，从我开始</span>
							</p>
							<p class="price pt-10">￥59.9</p>
						</div>

					</div>
				</div>
			</div>
			<div class="list">
				<div class="list_product">
					<div class="list_product_c">
						<img src="./fonts/phone.jpg">
						<p class="desc desc1">【128G到手6389元起+下单赢苹果手表！】/p>
						<div class="price_">
	
							<span class="price product_price">6389</span>
							<span class="olf_price">7229</span>
						</div>
					</div>
					<div class="list_product_c">
						<img src="./fonts/phone1.jpg">
						<p class="desc desc1">分期免息Apple/苹果 iPhone 11全新未激活国行xsmax全网通xr手机x</p>
						<div class="price_">
							<span class="price product_price">3900</span>
							<span class="olf_price">4600</span>
						</div>
					</div>
					<div class="list_product_c">
						<img src="./fonts/phone2.jpg">
						<p class="desc desc1">Apple/苹果 iPhone 11 苹果11promax国行正品全网通双卡手机现货</p>
						<div class="price_">
							<!-- <span class="price fuhao">￥</span> -->
							<span class="price product_price">4399</span>
							<span class="olf_price">4999</span>
						</div>
					</div>
					<div class="list_product_c">
						<img src="./fonts/phone3.jpg">
						<p class="desc desc1">2020新品Apple/苹果 iPhone 12 苹果12手机6.1英寸5G智能手机全网</p>
						<div class="price_">
							<span class="price product_price">6366</span>
							<span class="olf_price">7299</span>
						</div>
					</div>
					<div class="list_product_c">
						<img src="./fonts/bb.jpg">
						<p class="desc desc1">年轻漂亮有活力，性格开朗，能力较强且任劳任怨，家务活全包，现在低价处理...</p>
						<div class="price_">
							<span class="price product_price">34.5</span>
							<span class="olf_price">99</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="./js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();
			mui('.mui-scroll-wrapper').scroll({
				deceleration: 0.0005, //
				scrollY: false, //是否竖向滚动
				scrollX: true, //是否横向滚动
				startX: 0, //初始化时滚动至x
				startY: 0, //初始化时滚动至y
				indicators: true, //是否显示滚动条
				deceleration: 0.0006,//阻尼系数,系数越小滑动越灵敏
				bounce: true, //是否启用回弹
			});
		</script>
	</body>
</html>
